<template>
  <div>
    <!-- 查询 -->
    <div>
      <el-input placeholder="请输入客户ID" style="width:200px" v-model="queryCustomerId"></el-input>
      <el-button @click="queryByCustomerId" type="success" plain>查询</el-button>
      <el-button @click="showBackdownDialog" type="primary" style="width: 100px; margin-left: 50px;font-weight: bolder; font-size: 16px">
        登&emsp;记
      </el-button>
    </div>
    <!-- 显示所有退住信息 table自动循环-->
    <div>{{errorMessage}}</div>
    <el-table :data="backdownList">
      <el-table-column label="序号" type="index" width="60px"></el-table-column>
      <el-table-column prop="customerId" label="客户ID" width="80px"></el-table-column>
      <el-table-column prop="retreattime" label="退住时间" width="120px" :formatter="formatDate"></el-table-column>
      <el-table-column prop="retreattype" label="退住类型" width="120px">
        <template #default="scope">
          {{ getRetreatTypeName(scope.row.retreattype) }}
        </template>
      </el-table-column>
      <el-table-column prop="retreatreason" label="退住原因" width="120px"></el-table-column>
      <el-table-column prop="auditstatus" label="审批状态" width="120px">
        <template #default="scope">
          {{ getAuditStatusName(scope.row.auditstatus) }}
        </template>
      </el-table-column>
      <el-table-column prop="auditperson" label="审批人" width="120px"></el-table-column>
      <el-table-column prop="audittime" label="审批时间" width="120px" :formatter="formatDate"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="showEditDialog(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="example-pagination-block">
      <el-pagination background
                     v-model:current-page="pageContains.pageNum"
                     v-model:page-size="pageContains.pageSize"
                     :page-sizes="[10,20,30,50,100]"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="pageContains.total"
                     @size-change="handleSizeChange"
                     @current-change="handlePageChange"
      />
    </div>

    <!-- 退住信息对话框 -->
    <el-dialog v-model="backdownDialog" :title="dialogTitle">
      <el-form :model="curBackdown">
        <el-form-item label="客户ID">
          <el-col :span="11">
            <el-input v-model="curBackdown.customerId"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="退住时间">
          <el-col :span="11">
            <el-date-picker v-model="curBackdown.retreattime"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="退住类型">
          <el-col :span="11">
            <el-select v-model="curBackdown.retreattype">
              <el-option
                  v-for="item in retreatTypeOptions"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="退住原因">
          <el-col :span="11">
            <el-input v-model="curBackdown.retreatreason"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="审批状态">
          <el-col :span="11">
            <el-select v-model="curBackdown.auditstatus">
              <el-option
                  v-for="item in auditStatusOptions"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="审批人">
          <el-col :span="11">
            <el-input v-model="curBackdown.auditperson"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="审批时间">
          <el-col :span="11">
            <el-date-picker v-model="curBackdown.audittime"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-form>
      <el-button @click="optOne()">{{buttonOpt}}</el-button>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import http from '@/axios/http';
import qs from "qs";

// 存放用户数据集合
let backdownList = ref([]);

// 报错提示
let errorMessage = ref("");

// 模糊查询绑定的 客户ID
let queryCustomerId = ref("");

// 对话框显示控制
let backdownDialog = ref(false);

// 退住信息，或者编辑已有客户的 绑定数据
let curBackdown = ref({});

// 登记、修改退住信息弹出框的 标题和操作按钮  显示文字
let dialogTitle = reactive("");
let buttonOpt = reactive("");

// 对话框操作类型：1：添加 2：编辑
let dialogOptType = reactive(1);
let size = 10; // 当前显示多少行
let pageNum = 1; // 当前页码
let pageSize = 10; // 每页显示行数

// 当前页码信息
let pageContains = ref({});

// 退住类型数组
let retreatTypeOptions = ref([
  {
    label: '正常退住',
    value: 0
  },
  {
    label: '死亡退住',
    value: 1
  },
  {
    label: '保留床位',
    value: 2
  }
]);

// 审批状态数组
let auditStatusOptions = ref([
  {
    label: '已提交',
    value: 0
  },
  {
    label: '同意',
    value: 1
  },
  {
    label: '拒绝',
    value: 2
  }
]);

// 根据客户ID模糊查询退住信息
function queryByCustomerId() {
  let param = {
    customer_id: queryCustomerId.value
  }

  // 使用 GET 请求
  http.get('/lyy/get_backdowns_by_customer_id',  param ).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          backdownList.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  )
}

// 单击登录按钮事件
function showBackdownDialog() {
  dialogTitle = "退住登记";
  buttonOpt = "录入";
  // 弹出退住信息对话框
  backdownDialog.value = true;
  dialogOptType = 1; // 设置当前操作类型标志是 录入
}

// 关闭退住信息对话框
function closeBackdownDialog() {
  backdownDialog.value = false;
}

// 页面初始化
onMounted(() => {
  init();
});

function init() {
  // 查询所有退住信息
  getAllBackdowns();
}

function getAllBackdowns() {
  let params = ref({
    size: size,
    pageNum: pageNum,
    pageSize: pageSize
  });

  http.post('/lyy/get_all_backdowns', params.value).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 backdownList
        if (result.result === 'success') {
          pageContains.value = result.data;
          backdownList.value = result.data.list;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 格式化日期
function formatDate(row, column) {
  let data = row[column.property];

  if (data == null) {
    return null;
  }

  let dt = new Date(data);
  return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();
}

function recordOne() {
  let param = curBackdown.value;
  http.post('/lyy/add_one_backdown', param).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 backdownList
        if (result.result === 'success') {
          // 关闭对话框
          closeBackdownDialog();

          // 刷新退住列表
          getAllBackdowns();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 显示编辑对话框
function showEditDialog(backdownid) {
  // 根据id查询退住信息
  getBackdownInfo(backdownid);

  // 显示对话框
  console.log(backdownid);
  backdownDialog.value = true;
  dialogTitle = "退住信息修改";
  buttonOpt = "修改";

  dialogOptType = 2; // 设置当前操作类型标志是 修改
}

function getBackdownInfo(backdownid) {
  let param = {
    id: backdownid
  };
  http.post('/lyy/get_backdown_by_id', qs.stringify(param)).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 curBackdown
        if (result.result === 'success') {
          curBackdown.value = result.data;
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

// 删除退住记录
function removeOne(backdownid) {
  let param = {
    id: backdownid
  };
  http.post('/lyy/remove_backdown_by_id', qs.stringify(param)).then(
      (res) => {
        let result = res.data;
        // 返回结果传给 backdownList
        if (result.result === 'success') {
          getAllBackdowns();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function editOne() {
  let param = curBackdown.value;
  http.post('/lyy/modify_backdown_by_id', param).then(
      (res) => {
        let result = res.data;
        if (result.result === 'success') {
          closeBackdownDialog();
          getAllBackdowns();
        } else {
          errorMessage.value = result.error;
        }
      }
  );
}

function optOne() {
  if (dialogOptType === 1) {
    recordOne();
  } else if (dialogOptType === 2) {
    editOne();
  }
}

// 分页处理
const handlePageChange = (pageNum1) => {
  pageNum = pageNum1;
  getAllBackdowns();
};

const handleSizeChange = (pageSize1) => {
  pageSize = pageSize1;
  getAllBackdowns();
};

// 获取退住类型名称
function getRetreatTypeName(retreattype) {
  switch (retreattype) {
    case 0:
      return '正常退住';
    case 1:
      return '死亡退住';
    case 2:
      return '保留床位';
    default:
      return '';
  }
}

// 获取审批状态名称
function getAuditStatusName(auditstatus) {
  switch (auditstatus) {
    case 0:
      return '已提交';
    case 1:
      return '同意';
    case 2:
      return '拒绝';
    default:
      return '';
  }
}
</script>

<style scoped>
</style>



